/* 流程图 */
#flow-chart{
	display: flex;
	height: 100%;
    width: 100%;
    overflow: auto;
    border-width: 0px;
}

/* 开始节点 */
.item-img-start{
	width:32px;
	height:32px;
	background-color: #a3e085;
	border-radius: 50%;	
}
.flow-chart-start{
	width: 125px;
	height: 76px;
    text-align: center;
    position:relative;
    background: linear-gradient(to top, #fff 45%, #f5e6d0 45%, #a3e085 45%, #fff 50%);
}
.item-node-start{
	position: absolute;
	top:65%;
	left: 0%;
	transform:translate(0%,-50%);
}

/* 内容节点 */
.item-node:hover{
	cursor:pointer;
}
.item-node{
	width: 125px;
	height: 76px;
	position: relative;
	border-radius: 8px;
}
.item-node-state-1{
	background-color: #fdfbfb;
	border: 1px solid #a3e085;
}

.item-node-state-2{
	background-color: #fdfbfb;
	border: 1px solid #f4c68c;
}

.item-node-state-3{
	background-color: #fdfbfb;
	border: 1px dashed #9a9393;
}
.item-node-icon{
	display: flex;
	justify-content:space-between;
}

.item-node-icon img{
	width: 16px;
	height: 16px;
	padding: 3px 0 0 3px;
}
.item-node-name{
	text-align: center;
	font-weight: 550;
}
.item-node-approver{
	text-align: center;
}

/* 奇数行 */
.flow-row-odd{
	display: flex;
}
/* 偶数行 */
.flow-row-even{
	display: flex;
}
/* 奇数行 */
.flow-row-odd:not(:last-child){
	margin-bottom: 75px;
}
/* 偶数行 */
.flow-row-even:not(:last-child){
	margin-bottom: 75px;
}

/* 横向连线 */
.connect{
	cursor:pointer;
}
.x-connect{
	display:flex;
	align-items:center;
	position: relative;
}
.x-connect-1{
	width: 93px;
  	height: 2px;
  	background-color: #a3e085;
  	text-align: center;
}
.x-connect-3{
	width: 93px;
  	height: 2px;
  	background-color: #c1c1c1;
  	text-align: center;
}
/* 纵向连线 */
.y-connect{
	display:flex;
	align-items:center;
	position: relative;
}
.y-connect-1{
	width: 2px;
  	height: 76px;
  	background-color: #a3e085;
  	position: absolute;
  	top:77px;
  	right: 63px;
}
.y-connect-3{
	width: 2px;
  	height: 76px;
  	background-color: #c1c1c1;
  	position: absolute;
  	top:77px;
  	right: 63px;
}
/* 结束节点 */
.item-img-end{
	width:32px;
	height:32px;
	background-color: #999999;
	border-radius: 50%;
	margin: -2px auto 0px auto;
}
.flow-chart-end{
	width: 125px;
	height: 76px;
    text-align: center;
	position: relative;
}
.flow-row-odd .item-nonde-end{
    position:absolute;
    top:65%;
	left: 0%;
	transform:translate(0%,-50%);
}
.flow-row-even .item-nonde-end{
    position:absolute;
    top:65%;
	right: 0%;
	transform:translate(0%,-50%);
}

/*节点悬浮*/
.item-node-detail{
	display: none;
	position: absolute;
	width:350px;
    left: 90px;
    top: 19px;
}
.detail-table{
	white-space:nowrap;
	text-align:center;
	border-collapse:collapse;
	width:100%;
	z-index: 1;
}
.detail-table-title{
	background-color: #e9f6fe;
}
.detail-table-body{
	background-color:#ffffff;
}